import { FlameChartComponent, NodeTypes } from '../../../../src/wrappers/react/flame-chart-component';
import {
    DefaultPatterns,
    FlameChartNode,
    FlameChartSettings,
    FlameChartStyles,
    Marks,
    Timeseries,
    WaterfallItems,
} from '../../../../src';
import { FlameChartContainerStyles } from '../../../../src/flame-chart-container';
import styles from './default-flame-chart.module.css';
import { waterfallIntervals } from '../../test-data';
import { useMemo } from 'react';

export type DefaultFlameChartProps = {
    flameChartData?: FlameChartNode[];
    waterfallData?: WaterfallItems;
    marksData?: Marks;
    timeseriesData?: Timeseries;
    timeframeTimeseriesData?: Timeseries;
    stylesSettings?: FlameChartContainerStyles<FlameChartStyles>;
    patternsSettings?: DefaultPatterns[];
    onSelect?: (node: NodeTypes) => void;
};

export const DefaultFlameChart = ({
    flameChartData,
    waterfallData,
    marksData,
    timeseriesData,
    timeframeTimeseriesData,
    stylesSettings,
    patternsSettings,
    onSelect,
}: DefaultFlameChartProps) => {
    const waterfall = useMemo(
        () =>
            waterfallData
                ? {
                      intervals: waterfallIntervals,
                      items: waterfallData,
                  }
                : undefined,
        [waterfallData],
    );

    const settings = useMemo(
        (): FlameChartSettings => ({
            styles: stylesSettings,
            patterns: patternsSettings,
        }),
        [stylesSettings, patternsSettings],
    );
let temData={
    "id": "root",
    "name": "root123456",
    "value": 4056805,
    "type": "es",
    "start": 1744232548000,
    "pattern":"root",
    "children": [
        {
            "id": "stage-2",
            "name": "stage-2",
            "value": 56700,
            "type": "stage",
            "start": 1744232549080,
            "children": [
                {
                    "id": "1",
                    "name": "判断是否需要构建",
                    "value": 12560,
                    "type": "job",
                    "start": 1744232550119,
                    "node": "ydpdlgpw",
                    "children": [
                        {
                            "id": "e-9669d0c1d79743c7bd6502c6dfdd85d9",
                            "name": "设置 svn 地址",
                            "value": 7751,
                            "type": "task",
                            "start": 1744232587746,
                            "node": "ydpdlgpw",
                            "children": []
                        },
                        {
                            "id": "e-df25f40573014f19974036ccc178787a",
                            "name": "设置构建变量",
                            "value": 4809,
                            "type": "task",
                            "start": 1744232596357,
                            "node": "ydpdlgpw",
                            "children": []
                        }
                    ]
                }
            ]
        },
        {
            "id": "stage-3",
            "name": "windows/PS5/XBOX构建",
            "value": 4000105,
            "type": "stage",
            "start": 1744232606299,
            "children": [
                {
                    "id": "2",
                    "name": "10.11.33.201",
                    "value": 3979286,
                    "type": "job",
                    "start": 1744232607745,
                    "node": "${BUILD_ENV}",
                    "children": [
                        {
                            "id": "e-6926d1f6839f478b87e71332e8e92413",
                            "name": "检出构建代码",
                            "value": 25150,
                            "type": "task",
                            "start": 1744232611351,
                            "node": "${BUILD_ENV}",
                            "children": []
                        },
                        {
                            "id": "e-f5e70e209e48442a8f1ed63ba722618b",
                            "name": "设置分支地址",
                            "value": 4895,
                            "type": "task",
                            "start": 1744232638553,
                            "node": "${BUILD_ENV}",
                            "children": []
                        },
                        {
                            "id": "e-943e4cbff8544c3486f4514ce0993a13",
                            "name": "列出分支下的文件列表",
                            "value": 4115,
                            "type": "task",
                            "start": 1744232645585,
                            "node": "${BUILD_ENV}",
                            "children": []
                        },
                        {
                            "id": "e-n2e7784da1854ab4834031c4e1a1c824",
                            "name": "检出前准备",
                            "value": 7697,
                            "type": "task",
                            "start": 1744232650559,
                            "node": "${BUILD_ENV}",
                            "children": []
                        },
                        {
                            "id": "e-f3939cea43894482a6a7da86fdf69c84",
                            "name": "检出Unity工程",
                            "value": 266414,
                            "type": "task",
                            "start": 1744232659814,
                            "node": "${BUILD_ENV}",
                            "children": []
                        },
                        {
                            "id": "e-n24a0c2ed5b540169095ebc3fec49782",
                            "name": "链接前准备",
                            "value": 4900,
                            "type": "task",
                            "start": 1744232926907,
                            "node": "${BUILD_ENV}",
                            "children": []
                        },
                        {
                            "id": "e-f6c189b81e234db29b779437aa6dda4c",
                            "name": "构建前链接",
                            "value": 21184,
                            "type": "task",
                            "start": 1744232932600,
                            "node": "${BUILD_ENV}",
                            "children": []
                        },
                        {
                            "id": "e-7ed8423b64dd45eea21c9ac976608980",
                            "name": "构建前准备",
                            "value": 8971,
                            "type": "task",
                            "start": 1744232954791,
                            "node": "${BUILD_ENV}",
                            "children": []
                        },
                        {
                            "id": "e-6c7cfc6ae3b14d62bdb74f2928cef240",
                            "name": "获取svn提交日志",
                            "value": 4102,
                            "type": "task",
                            "start": 1744232964897,
                            "node": "${BUILD_ENV}",
                            "children": []
                        },
                        {
                            "id": "e-h36b15f8a5464160ae393c4953cab72a",
                            "name": "Unity构建",
                            "value": 3188477,
                            "type": "task",
                            "start": 1744232970805,
                            "node": "${BUILD_ENV}",
                            "children": []
                        },
                        {
                            "id": "e-5824d5a66be6454790a794c375d48295",
                            "name": "构建后处理",
                            "value": 443381,
                            "type": "task",
                            "start": 1744236159639,
                            "node": "${BUILD_ENV}",
                            "children": []
                        }
                    ]
                }
            ]
        }
    ]
}
console.log("temData",temData)
const addDurationToNodes = node => {
    node.duration = node.value;
    /* if(getUrlParam("tabType")==='SBP'){
      node.type=node.name==='root'?null:'task';
    }
      const baseColor = pipLineColor[node.type] || pipLineColor.root;
    node.colorList=[getColorWithOpacity(baseColor, node.duration)];
    node.color=node?.colorList[0]||""; */
    if (node.children && node.children.length > 0) {
      node.children.forEach(child => addDurationToNodes(child));
    }
    //setCloneTaskData(cloneDeep(node))
    return node;
  };
  temData=addDurationToNodes(temData)
  const calculateTimeSeriesData = (data) => {
    const allDuration = data.duration;
    const timeSeriesData = [];
    
    const traverse = (node) => {
        const { start, duration } = node;
        const currentNodeSeriesData = [
            start, 
            Number(Math.floor(duration/allDuration*100).toFixed(2))  // 转换为数字
        ];
        timeSeriesData.push(currentNodeSeriesData);
        
        if (node.children && node.children.length > 0) {
            node.children.forEach(child => traverse(child));
        }
    };

    traverse(data);  
    return timeSeriesData;
};
   // 创建时间序列数据
   const timeframeTimeseriesData1 = useMemo(() => ([
    {
        name: '构建进度',
        points: calculateTimeSeriesData(temData),
        tooltip: {
            format: (x, y) => {
                console.log("x,y",x,y)
            },
        },
        units: '%',
        style: {
            lineColor: '#45B7D1',
            fillColor: 'rgba(69, 183, 209, 0.1)',
            pointColor: '#45B7D1'
        },
        min: 0,
        max: 100,
        dynamicMinMax: false
    },
]), [temData]);
    return (
        <FlameChartComponent
            data={[temData]}
            settings={settings}
            className={styles.flameChart}
            timeframeTimeseries={timeframeTimeseriesData1}
            /* waterfall={waterfall}
            marks={marksData}
            timeseries={timeseriesData}
            timeframeTimeseries={timeframeTimeseriesData}
            settings={settings}
            className={styles.flameChart}
            onSelect={onSelect}
            hotkeys={true} */
        />
    );
};
